<template>
  <div id="L">
    <div class="nameTop">
      <div class="name">作品展示</div>
      <div class="more" @click="moreClick">个人视频主页</div>
    </div>
    <div class="content">
      <div v-for="(item, index) in infos" :key="index"  class="itemFather" @click="itemClick(item.bvid)">
        <div class="img">
          <img :src="item.pic" alt="视频封面" width="100%">
        </div>
        <div class="msg">
          <div class="top">
            <div class="tname">{{ item.tname.length > 0 ? item.tname : '视频类型' }}</div>
            <div class="titles">{{ item.title.length > 0 ? item.title : '视频标题' }}</div>
          </div>
          <div class="cent">
            <div class="desc">{{ item.desc.length > 0 ? item.desc : '视频简介' }}</div>
          </div>
          <div class="bot">
            <div class="bot-l">
              <div>
                <div><img :src="imgView" alt="播放量" width="14px" height="14px"></div>
                <div>{{ item.views > 0 ? item.views : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgDanmaku" alt="弹幕" width="14px" height="14px"></div>
                <div>{{ item.danmaku > 0 ? item.danmaku : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgreply" alt="评论" width="14px" height="14px"></div>
                <div>{{ item.reply > 0 ? item.reply : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgCoin" alt="投币" width="14px" height="14px"></div>
                <div>{{ item.coin > 0 ? item.coin : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgFavorite" alt="收藏" width="14px" height="14px"></div>
                <div>{{ item.favorite > 0 ? item.favorite : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgLike" alt="点赞" width="14px" height="14px"></div>
                <div>{{ item.like > 0 ? item.like : 1 | million }}</div>
              </div>
              <div>
                <div><img :src="imgShare" alt="转发" width="14px" height="14px"></div>
                <div>{{ item.share > 0 ? item.share : 1 | million }}</div>
              </div>
              
            </div>
            <div class="bot-r">
              {{ item.ctime > 0 ? item.ctime : 1588298880 | formatDate}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      imgView: require('../img/view.png'),
      imgLike: require('../img/like.png'),
      imgreply: require('../img/reply.png'),
      imgDanmaku: require('../img/danmaku.png'),
      imgCoin: require('../img/coin.png'),
      imgFavorite: require('../img/favorite.png'),
      imgShare: require('../img/share.png'),
      infos: [
        {
          bvid: 'BV1X7411c7Y4',
          pic: 'http://i2.hdslb.com/bfs/archive/2f9635e902130ccfc72063d244c804f7c553f972.png',
          tname: '手机平板',
          title: '我为什么喜欢小米？写在小米10发布之后【献给十周岁的小米】',
          desc: '我喜欢小米这家公司，更准确的来说，我是喜欢雷军！我敬佩他~但是我不是米粉，我没有用小米的产品。我一直用的华为手机，但是这并不影响。这次小米10冲击高端，我是看好的！希望雷军能够实现自己年轻时候的梦想！最后希望大家能够忍受我不好听的声音以及噪音！我是用耳机录的，看样子以后还是得买个专业麦克风才行呀！',
          views: 111610,
          danmaku: 3101,
          reply: 1355,
          coin: 4449,
          favorite: 2475,
          like: 6834,
          share: 622,
          ctime: 1582218029,
        },
        {
          bvid: 'BV1SJ411e7wm',
          pic: 'http://i1.hdslb.com/bfs/archive/ceb124433091d1af7575d9afc9c86417ad3970f6.png',
          tname: '电脑装机',
          title: '【亲测有效】华为、荣耀笔记本Linux转Win10系统教程！具体教程还请去看简书教程哟~',
          desc: '以下是链接！ 更多更详细的安装步骤，还请去简书观看哈！简书里面我写的很详细！win10系统百度网盘链接：https://pan.baidu.com/s/1Ks3s4EQWNcNh2w_FYmbcKQ 百度网盘提取码：cgde win10系统安装-简书教程链接：https://www.jianshu.com/p/a5e09f17f452',
          views: 14873,
          danmaku: 9,
          reply: 122,
          coin: 134,
          favorite: 490,
          like: 223,
          share: 104,
          ctime: 1575735149,
        },
        {
          bvid: 'BV1Vb411K7uK',
          pic: 'http://i2.hdslb.com/bfs/archive/c85c983397f7ad7161fa2042af0f7e66939466c9.png',
          tname: '手机平板',
          title: '【Vlog.2】在寝室快速开箱两台华为P30Pro*天空之境+珠光贝母*室友们都看呆了！&人生第一次同时开箱上手两台华为旗舰手机',
          desc: '第一次做手机开箱，什么都不懂，还请大家多多包涵！但是我说的都是我自己最真实的感受~希望能给到大家一些帮助和了解！本期视频就是晚上拍摄，然后第二天我自己早起来录音，随便剪辑了一下。只是为了能在第一时间就把这个上手视频分享给大家！如果喜欢这个视频，请三连一些啦~ 如果可以关注一下我，支持我这个新人UP主。那就最好不过了！！！谢谢了哈',
          views: 51829,
          danmaku: 277,
          reply: 282,
          coin: 201,
          favorite: 116,
          like: 565,
          share: 133,
          ctime: 1555065013,
        },
        {
          bvid: 'BV1Ft411m7ia',
          pic: 'http://i1.hdslb.com/bfs/archive/0f21527da59881e1860832dd03c1c3c3da66ac4f.png',
          tname: '电脑装机',
          title: '第一次组装电脑#没想到会遇到有这么多麻烦？不过以后终于可以流畅的剪辑视频啦~~刺激刺激upup',
          desc: '双十一自己买了电源，主板，内存条，处理器，硬盘。没买新的显卡（因为没那么多钱了55555）第一次组装电脑~还是受益良多的以后终于可以用AE给视频加特效啦~  开心呀！！！',
          views: 40105,
          danmaku: 298,
          reply: 320,
          coin: 56,
          favorite: 304,
          like: 150,
          share: 20,
          ctime: 1542331991,
        },
        {
          bvid: 'BV1vb411P7W8',
          pic: 'http://i0.hdslb.com/bfs/archive/744a5d314186523f825cb63eb7a753e04fe77323.png',
          tname: '电子竞技',
          title: '【IG加油】来自抖音无数网友的应援~翻过这座山，他们就会听到你的故事……IG冲鸭！！！',
          desc: '抖音上面，越来越多的人把头像换成了IG的队徽，把名字改为了：IG加油S8全球总决赛，IG冲鸭！！！',
          views: 30798,
          danmaku: 64,
          reply: 34,
          coin: 186,
          favorite: 446,
          like: 270,
          share: 111,
          ctime: 1541163140,
        },
        {
          bvid: 'BV1sW41127MW',
          pic: 'http://i1.hdslb.com/bfs/archive/52e71faf82ac4fc2e6f7bb1e20b3c1a78b15553d.png',
          tname: '电子竞技',
          title: '【EDG】看昭皇的赛后采访能把我笑死，我余霜阿姨都快要崩溃了……',
          desc: '感觉跟昭皇聊天，能一句话把天聊死！这赛后采访真的笑死我了！哈哈哈哈哈哈哈哈哈哈……',
          views: 643346,
          danmaku: 1363,
          reply: 693,
          coin: 505,
          favorite: 1166,
          like: 1352,
          share: 475,
          ctime: 1538704860,
        },
        
      ],
      av: [90471013, 78441313, 49077327, 36050998, 35127200, 33134436]
    };
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value * 1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
    million:function (value){//过万处理
      let num;
    if(value > 9999){//大于9999显示x.xx万
        num=(Math.floor(value/1000)/10) + '万';
    }else if( value < 9999 && value>-9999){
      num=value
    }else if(value<-9999){//小于-9999显示-x.xx万
        num = -(Math.floor(Math.abs(value)/1000)/10)+'万'
    }
    return num;
    }
  },
  mounted() {
  },
  created() {
    for(let i = 0; i < this.av.length; i++) {
      let aid = this.av[i]
      this.$axios.get('https://api.bilibili.com/x/web-interface/view', {params:{aid}})
      .then((res) => {
        this.infos[i].bvid = res.data.data.bvid
        this.infos[i].pic = res.data.data.pic
        this.infos[i].tname = res.data.data.tname
        this.infos[i].title = res.data.data.title
        this.infos[i].desc = res.data.data.desc
        this.infos[i].views = res.data.data.stat.view
        this.infos[i].danmaku = res.data.data.stat.danmaku
        this.infos[i].reply = res.data.data.stat.reply
        this.infos[i].coin = res.data.data.stat.coin
        this.infos[i].favorite = res.data.data.stat.favorite
        this.infos[i].like = res.data.data.stat.like
        this.infos[i].share = res.data.data.stat.share
        this.infos[i].ctime = res.data.data.ctime
      })
    }
  },
  computed:{
  },
  watch:{
  },
  methods: {
    moreClick() {
      window.open('https://space.bilibili.com/50100030')
    },
    itemClick(vid) {
      window.open(`https://www.bilibili.com/video/${vid}`)
    }
  },
};
</script>

<style scoped>
.nameTop {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 5px 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  text-align: center;
  cursor: default;
}
.name {
  font-size: 32px;
  margin-left: 10px;
  color: #fff;
  font-family: pangmeng;
}
.more {
  font-size: 24px;
  font-weight: 800;
  color: #aaa;
  padding: 5px;
  background-color: rgba(0, 0, 0, .2);
  border-radius: 6px;
  margin-right: 10px;
  cursor: pointer;
  transition: all .5s;
}
.more:hover {
  color: #fff;
  background-color: #666;
}
.content {
  height: 820px;
  overflow: hidden;
  cursor: default;
}
.itemFather {
  height: 106px;
  display: flex;
  margin: 10px;
  padding: 10px;
  border-radius: 6px;
  color: #eee;
  background-color: rgba(0, 0, 0, .6);
  transition: all .5s;
  cursor: pointer;
}
.itemFather:hover {
  color: #000;
  background-color: #fff;
}
.img {
  flex: 20%;
  margin-right: 10px;
  height: 80px;
}
.img img {
  border-radius: 6px;
}
.msg {
  flex: 80%;
}
.top {
  width: 100%;
  display: flex;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tname {
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  border: 1px solid #bbb;
  border-radius: 6px;
  white-space: nowrap;
  margin-right: 5px;
  color: #aaa;
  text-align: center;
}
.titles {
  font-size: 20px;
  font-weight: 600;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cent {
  font-size: 14px;
  padding: 5px;
  height: 28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color: #aaa;
}
.bot {
  margin-top: 5px;
  height: 22px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.bot-l {
  display: flex;
  line-height: 100%;
}
.bot-l div {
  display: flex;
  font-size: 12px;
  margin-right: 5px;
  color: #aaa;
}
.bot-r {
  color: #aaa;
  line-height: 100%;
  font-size: 14px;
}
</style>
